<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>支付</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js">
</script>

<script type="text/javascript">

//价差输入的电话号码是否合格
function checkName(name){
	 name = $("#name").val();
		if(name == null || name == ""){
			alert("收货人姓名不能为空呦！")
		} else{
			return true;
		}		
}

  //价差输入的电话号码是否合格
  function checkAdress(adress){
	 adress = $("#adress").val();
		if(adress == null || adress == ""){
			alert("收货地址可不要忘了呦！")
		} else{
			return true;
		}		
  }
  
//价差输入的电话号码是否合格
  function checkPhone(phoneLength){
	 phoneLength = $("#phone").val();
		if(phoneLength.length != 11){
			alert("电话号码格式错误，请输入正确号码！")
		} else{
			return true;
		}		
  }
  
//创建订单信息
	function createOrders() {
		var name = $("#name").val();
		var adress = $("#adress").val();
		var phone = $("#phone").val();
		var tips = $("#tips").val();
	    var user_id = $("#user_id").val();
		$.ajax({
					url : "${pageContext.request.contextPath }/createOrders.do",
					type : "post",
					// data表示发送的数据
					data : JSON.stringify({
						name : name,
						adress : adress,
						phone : phone,
						tips : tips,
						user_id : user_id
						
					}),
					// 定义发送请求的数据格式为JSON字符串
					contentType : "application/json;charset=UTF-8",
					//定义回调响应的数据格式为JSON字符串,该属性可以省略
					dataType : "json",
					//成功响应的结果
					success : function(data) {
						if (data != null) {
							alert("订单信息创建成功!");
						}
					}
				});
	}
  
  </script>
  </head>
<style>
body{
text-align: center;
paddin:0;
margin:0;
width:100%;
height:100%;
background-image:url(${pageContext.request.contextPath}/img/0.jpg) ;
background-repeat:no-repeat;
background-position: center ;
background-size:100% 220%;
color:#FFF

}
h1{
text-align: center;
}
.decision{
text-align:center;
cursor: pointer;
font-size:20px;
border-radius: 44px;
background: steelblue;
}
.cart_step{
text-align:center;
}
.zf{
width:50px;
height:50px;
}
</style>

<body>
<div class="cart_box">
	<h1 class="main_tit">  
      支付中心<strong>Payment</strong>  
    </h1>

	<!--提交支付-->
	<form id="pay_form" name="pay_form" method="post"action="/api/payment/balance/index.aspx" target="_blank">
		<input id="pay_order_no" name="pay_order_no" type="hidden" value="b15061907244648">
		<!--hidden-->
		<input id="pay_order_amount" name="pay_order_amount" type="hidden" value="2614.00">
		<input id="pay_user_name" name="pay_user_name" type="hidden" value="admin00">

		<div class="cart_step">
		<img src="${pageContext.request.contextPath }/img/step_02.jfif"/>
		</div>
		<div class="form_box">
		<form>
			<dl>
				<dt>收货人姓名：</dt>
				<input type="text" id="name" name="name" onblur="checkName(this)"/>
			</dl>
			<dl>
				<dt>送货地址：</dt>
				<input type="text" id="adress" name="adress" onblur="checkAdress(this)"/>
			</dl>
			<dl>
				<dt>手机号码：</dt>
				<input type="text" id="phone" name="phone" onblur="checkPhone(this)"/>
			</dl>
			<dl>
				<dt>备注留言：</dt>
				<input type="text" id="tips" name="tips" />
			</dl>
			<dl>
				<dt>测试user_id：</dt>
				<input type="text" id="user_id" name="user_id" />
			</dl>
			</form>
			<dl>
				<dt>支付方式：</dt>
				<br/>
   <form name="form" method="post" >
 
　　<input type="radio"name="checkbox"value="支付宝"checked="checked"/><img class="zf" src="${pageContext.request.contextPath }/img/zfb.png"/>
 
　　<input type="radio"name="checkbox"value="微信"/><img class="zf" src="${pageContext.request.contextPath }/img/wechat.png"/>
 
　　<input type="radio"name="checkbox"value="花呗"/><img class="zf" src="${pageContext.request.contextPath }/img/huabei.png"/>
 
　　<input type="radio"name="checkbox"value="银行卡"/><img class="zf" src="${pageContext.request.contextPath }/img/bank.png"/>

　　</form>
			</dl>
			<dl>
			
				<p><a href="${pageContext.request.contextPath}/success.do">
				<input type="text" value="确认支付" class="decision" onclick="createOrders()" />
				</a></p>
			</dl>
			
		</div>
	</form>
	<!--提交支付-->

	<div class="clear"></div>
</div>
</body>
</html>